<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-input-number</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <style>
        [v-cloak] {
            visibility: hidden;
        }
        .main {
            width: 125px;
            margin-left: 20px;
        }
        .dropdown {
            width: 100%;
            height: 150px;
            margin: 5px 0;
            font-size: 12px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
        }
        .dropdown p {
            display: inline-block;
            padding: 6px;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="main" v-clickoutside.esc="handleClose">
        <button @click="show = !show" class="btn btn-primary">点击显示下拉菜单</button>
        <div class="dropdown" v-show="show">
            <p>下拉框的内容，点击外面区域可以关闭</p>
        </div>
    </div>
</div>
<script src="https://unpkg.com/vue"></script>
<!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"-->
<!--integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"-->
<!--crossorigin="anonymous"></script>-->
<script>
    Vue.directive('clickoutside', {
        bind(el, binding, vnode) {
            function documentHander(e) {
                if (el.contains(e.target)) {
                    return false;
                }
                if (binding.expression) {
                    binding.value(e);
                }
            }
            function escHander(event) {
                if (event.key.toLowerCase() === 'escape') {
                    if (binding.expression) {
                        binding.value(event);
                    }
                }
            }
            el._vueClickOutside_ = documentHander;
            document.addEventListener('click', documentHander);
            if (binding.modifiers.esc) {
                el._vueESCHidden_ = escHander;
                document.addEventListener('keydown', escHander);
            }
        },
        unbind(el, binding) {
            document.removeEventListener('click', el._vueClickOutside_);
            delete el._vueClickOutside_;
            if (el._vueESCHidden_) {
                document.removeEventListener('keydown', el._vueESCHidden_);
                delete el._vueESCHidden_;
            }
        },
        update(el, binding, vnode) {
            //document.removeEventListener('click', el._vueClickOutside_);
        }
    });
    let app = new Vue({
        el: '#app',
        data: {
            show: false
        },
        methods: {
            handleClose() {
                this.show = false;
            }
        }
    });
</script>
</body>
</html>